<template>
  <view class="bg-white">
    <view class="flex items-center justify-between p10px">
      <view v-if="userInfo && isLogin" class="flex items-center justify-between">
        <u-avatar src="https://img.yzcdn.cn/vant/cat.jpeg" :size="avatarSize" :shape="avatarShape" />
        <view class="ml flex justify-between">
          <view class="">
            <view class="mb2 text-16px font-bold">
              <text>{{ userInfo.username }}</text>
            </view>
            <view class="text-12px text-gray">标注了23个地点</view>
          </view>
        </view>
      </view>
      <view v-else class="flex items-center justify-between">
        <u-avatar :src="defaultAvatar" :size="avatarSize" :shape="avatarShape" />
        <view class="ml flex justify-between">
          <view>
            <view class="mb2 text-16px font-bold">
              <text data-eventsync="true" @click="getUserProfile">{{ defaultUsername }}</text>
            </view>
            <view class="text-12px text-gray">{{ defaultNotice }}</view>
          </view>
        </view>
      </view>
      <view v-if="userInfo" class="flex items-center text-12px" :style="{ color: settledColor }">已入驻</view>
    </view>
    <u-popup :show="show" round="10">
      <view class="p3">
        <view class="py3">
          <view class="font-bold">用户隐私保护提示</view>
          <view class="py2 text-gray">
            在你使用小程序服务前，请仔细阅读 <text class="color-blue" @click="handleOpenPrivacyContract">《小程序用户隐私保护协议》</text>。若你同意该协议，请点击“同意”以开始使用本小程序。
          </view>
        </view>
        <view class="flex items-center justify-around">
          <view class="w-40%">
            <u-button @click="show = false">拒绝</u-button>
          </view>
          <view class="w-40%">
            <u-button id="agree-btn" color="#FE2B54" open-type="agreePrivacyAuthorization" :agreeprivacyauthorization="handleAgreePrivacyAuthorization">
              同意
            </u-button>
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { useUserStore } from '~/stores/user'

export default {
  name: 'DkAppUserHeader',
  props: {
    // 已入驻颜色
    settledColor: { type: String, default: '#07c160' },
    // 头像大小
    avatarSize: { type: Number, default: 50 },
    // 头像形状
    avatarShape: { type: String, default: 'circle' },
    // 默认头像
    defaultAvatar: { type: String, default: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png' },
    // 未登录用户名
    defaultUsername: { type: String, default: '点击登录' },
    // 未登录标注
    defaultNotice: { type: String, default: '点击登录发布地点' },
  },
  data() {
    return {
      userData: null,
      show: false,
    }
  },
  computed: {
    isLogin() {
      return useUserStore().isLogin
    },
  },
  mounted() {
    this.userLogin()
    // this.show = true

    // tt.onNeedPrivacyAuthorization((resolve, eventInfo) => {
    //   console.log(`触发本次事件的接口是：${eventInfo.referrer}`)
    //   // 需要用户同意隐私授权时
    //   this.show = true
    // })
  },
  methods: {
    handleOpenPrivacyContract(){
      tt.openPrivacyContract({
        success: () => {}, // 打开成功
        fail: () => {}, // 打开失败
        complete: () => {},
      })
    },
    handleAgreePrivacyAuthorization() {
      // 用户点击同意按钮后
      // this.resolvePrivacyAuthorization({ buttonId: 'agree-btn', event: 'agree' })
      this.show = false
      // 用户点击同意后，开发者调用 resolve({ buttonId: 'agree-btn', event: 'agree' })  告知平台用户已经同意，参数传同意按钮的id。为确保用户有同意的操作，基础库在 resolve 被调用后，会去检查对应的同意按钮有没有被点击过。检查通过后，相关隐私接口会继续调用
      // 用户点击拒绝后，开发者调用 resolve({ event:'disagree' }) 告知平台用户已经拒绝
    },
    userLogin() {
      useUserStore().userLogin().then((res) => {
        this.userData = res
      }).catch(() => { })
    },
    getUserProfile() {
      useUserStore().getUserProfile(this.userData)
    },
  },
}
</script>

<style scoped></style>
